<template>
  <contentModel v-if="modelValue" title="撤销" @close="cancel">
    <table-container
      v-model:columns="columns"
      v-model:is-fullscreen="isFullscreen"
      :class="screenClass"
      :loading="loading"
      :all-columns="allColumns"
      @refresh="getTableData"
    >
      <template #container-side>
        <a-button type="primary" @click="handleSubmit">撤回</a-button>
      </template>
      <standard-table
        ref="compStandardTable"
        v-model:selectedKeys="nowSelectedKeys"
        :component-config="tableComponentConfig"
        :render-config="tableRenderConfig"
        :render-keys="tableRenderKeys"
        :loading="loading"
        :data="data"
        :total="total"
        :row-selection-type="rowSelectionType"
        :columns="columns"
        @init-columns-end="initColumns"
        @selection-change="selectionChange"
        @page-change="pageChange"
        @page-size-change="pageSizeChange"
      >
        <!-- 自定义操作栏 -->
        <template #operate="{ record, rowIndex }">
          <a-button type="text" @click="handleDetail(record, rowIndex)"
            >详情</a-button
          >
        </template>
      </standard-table>
    </table-container>
  </contentModel>
</template>

<script lang="ts" setup>
  import useFullScreen from '@/common/hooks/fullScreen';
  import { defineAsyncComponent, reactive, ref } from 'vue';
  import standardTable from '@/common/components/standard-table/index.vue';
  import lodash from 'lodash';
  import {
    tableRenderConfig,
    tableComponentConfig,
  } from '../moduleCommon/tableComp/baseTableConfig';

  defineProps({
    modelValue: {
      type: Boolean,
      default: false,
    },
  });
  const emits = defineEmits(['update:modelValue']);
  const cancel = () => {
    emits('update:modelValue', false);
  };
  const contentModel = defineAsyncComponent(
    () => import('@/common/components/content-model/index.vue')
  );
  const { isFullscreen, screenClass } = useFullScreen();
  // const { cancel } = useModelFun();
  const handleSubmit = () => {
    console.log(1);
  };
  const columns = ref<object[]>([]);
  const allColumns = ref<object[]>([]);
  const total = ref<number>(0);
  const loading = ref<boolean>(false);
  const initColumns = (data: any[]) => {
    columns.value = lodash.cloneDeep(data);
    allColumns.value = lodash.cloneDeep(data);
  };

  const rowSelectionType = {
    type: 'checkbox',
  };

  const data = reactive([
    {
      id: 1,
      key: '1',
      name: 'Jane Doe',
      salary: 23000,
      address: '32 Park Road, London',
      email: 'jane.doe@example.com',
    },
    {
      id: 12,
      key: '1',
      name: 'Jane Doe',
      salary: 23000,
      address: '32 Park Road, London',
      email: 'jane.doe@example.com',
    },
    {
      id: 13,
      key: '1',
      name: 'Jane Doe',
      salary: 23000,
      address: '32 Park Road, London',
      email: 'jane.doe@example.com',
    },
  ]);
  const getTableData = () => {
    console.log(1);
  };
  const pageChange = () => {
    getTableData();
  };
  const pageSizeChange = () => {
    getTableData();
  };
  const handleDetail = () => {
    getTableData();
  };
</script>
